<script lang="ts" setup>
    import {ref} from "vue";
    // 事件
    // contextmenu:鼠标右键

    function doubleClick(e:Event){
        console.log("---doubleClicked by"+e.target+"---");
        console.log(e);
    }
    function keydown(e:Event){
        console.log("---KeyDown---");
        console.log("按下了'W'按键");
        console.log(e);
    }
    function aClick(){
        console.log("a标签被点击了");
    }
    function formFun(){
        console.log("发送请求");
    }
</script>

<template>
    <div @dblclick.stop="doubleClick" class="div2">
        <div @dblclick="doubleClick" class="div1">双击此处</div>
    </div>
    <input @keydown.w="keydown" class="input1" type="text" placeholder="按下W触发">
    <a href="https://islys.cn" @click.prevent="aClick">打开网址</a>

    <form action="https://islys.cn" @submit.prevent="formFun">
        <input id="i1" class="input1" type="text" @keydown.enter="console.log('已提交')" @input="console.log('ed')">
        <button>提交</button>
    </form>
</template>

<style scoped>
    .div1{
        width: 100px;
        height: 80px;
        border: 1px solid black;
        text-align: center;
        line-height: 80px;
    }
    .div2{
        width: 200px;
        height: 160px;
        border: 1px solid black;
        text-align: center;
        line-height: 160px;
    }
    .input1{
        width: 100px;
        margin-top: 10px;
        border: 5px solid;
        margin-right: 5px;
    }
    button{
        width: 60px;
        height: 30px;
    }
</style>